window.onload = async () => {
  try {
    const res = await axios({
      url: '/dashboard',
      //  mrthod:get,
    })

    //  console.log(res.data);
    const { overview, year, salaryData, groupData, provinceData} = res.data
    console.log(res.data)
    // console.log(res.data.groupData)

    //  实现overview区域
    // document.querySelector('[name="salary"]').innerHTML=overview.salary
    // document.querySelector('[name="student_count"]').innerHTML=overview.student_count
    // document.querySelector('[name="age"]').innerHTML=overview.age
    // document.querySelector('[name="group_count"]').innerHTML=overview.group_count
    //console.log('每一项的值，overview[key])
    for (let key in overview) {
      document.querySelector(`[name="${key}"]`).innerHTML = overview[key]
    }
    //2.全学科走势图
    function salaryEcharts(year) {
      var myChart = echarts.init(document.getElementById('line'))

      const option = {
        // 标题部分的设置
        title: {
          text: '2022全学科薪资走势',
          top: '2%',
          left: '3%',
        },
        // 图表
        grid: {
          // 设置上下左右的间隙
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '10%',
        },
        // x轴的设置
        xAxis: {
          type: 'category',
          data: year.map((item) => item.month), // 箭头行数 一行代码 省略 {} return
          // x轴线段设置
          axisLine: {
            // 线段的样式
            lineStyle: {
              // 类型 虚线
              type: 'dashed',
              // 颜色
              color: '#d3d3d3',
            },
          },
          // x轴文本设置
          axisLabel: {
            // 颜色
            color: 'black',
          },
        },
        // y轴的设置
        yAxis: {
          type: 'value',
          // 分割线
          splitLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed', // 类型
              // width:20, // 宽度
              color: 'deepskyblue', // 颜色
            },
          },
        },
        color: ['#5f8eff'],
        // 提示框 设置了才会出现
        tooltip: {
          show: true,
        },
        series: [
          {
            data: year.map((item) => item.salary),
            type: 'line',
            // 圆圈
            smooth: true,
            // 圆圈大小
            symbolSize: 10,
            // 线宽
            lineStyle: {
              width: 8,
            },
            // 区域颜色
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#aed4ff', // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#ffffff', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    }
    salaryEcharts(year)
    //3.薪资分布区域//---先打印res.data选取里面数据 然后解构 再封装函数 获取改动区域再把option放进去改动改变的数据，对象用map创建新的出来
    function classEcharsMonet(salaryData) {
      var myEChart = echarts.init(document.getElementById('salary'))

      const option = {
        title: {
          text: '班级薪资分布',
          top: '2%',
          left: '3%',
        },
        tooltip: {
          trigger: 'item',
        },
        // 图例
        legend: {
          bottom: '5%',
          left: 'center',
        },
        // 颜色
        color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: salaryData.map((item) => {
              return {
                name: item.label,
                value: item.g_count + item.b_count,
              }
            }),
          },
        ],
      }
      myEChart.setOption(option)
    }
    classEcharsMonet(salaryData)
    // 4.groupData
    function groupSalary(groupData) {
      var myChart1 = echarts.init(document.getElementById('lines'))
      const option = {
        // x轴设置
        xAxis: {
          type: 'category',
          data: groupData[1].map((item) => item.name),
          // 线段设置
          axisLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6',
            },
          },
        },
        yAxis: {
          type: 'value',
          // 分割线设置
          splitLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6',
            },
          },
        },
        // 颜色
        color: [
          // 渐变
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34d29a', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d4f5ea', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499fed', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d8eafb', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          // 柱状图 给多个图形,会有柱形
          {
            data: groupData[1].map((item) => item.hope_salary),
            type: 'bar',
          },
          {
            data: groupData[1].map((item) => item.salary),
            type: 'bar',
          },
        ],
      }
      myChart1.setOption(option)
      //获取所有数据
      const btns = document.querySelectorAll('#btns .btn-xs ')
      console.log(btns) //伪数组 可以用forech
      btns.forEach((item) => {
        //获取所有按钮 开始点击事件
        item.onclick = function () {
          //2.不能点击一个都有颜色，要把其它干掉
          btns.forEach((sonitem) => {
            //使用forEach，方便全部遍历删除，不然一个一个设置麻烦
            sonitem.classList.remove('btn-blue')
          })
          //1.当前添加  --这里不嫩用箭头函数因为要把this指向当前点击事件
          this.classList.add('btn-blue') //点击谁谁有颜色效果

          const res = this.innerHTML.trim() //清除左右两边空格
          option.xAxis.data = groupData[res].map((item) => item.name)
          option.series[0] = groupData[res].map((item) => item.hope_salary)
          option.series[1] = groupData[res].map((item) => item.salary)
          myChart1.setOption(option)
        }
      })

      //测试 可不可以一秒更换下一个数据
      // setTimeout(function () {
      //   option.xAxis.data=groupData[2].map((item)=>item.name)
      //   option.series[0]=groupData[2].map((item)=>item.hope_salary)
      //   option.series[1] = groupData[2].map((item) => item.salary)
      //   myChart1.setOption(option)

      // },1000)
    }
    groupSalary(groupData)

    //5.sex
    function classEchars(salaryData) {
      var myChart2 = echarts.init(document.getElementById('gender'))
      const option = {
        // title可以设置一个数组 给多个标题
        title: [
          {
            text: '男女薪资分布',
            top: '3%',
            left: '4%',
          },
          {
            text: '男生',
            left: 'center',
            top: '45%',
          },
          {
            text: '女生',
            left: 'center',
            top: '85%',
          },
        ],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          show: false,
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['25%', '35%'],
            // 圆心的位置
            center: ['50%', '30%'],
            data: salaryData.map((item) => {
              return {
                name: item.label,
                value: item.b_count,
              }
            }),

            //   [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ],

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['50%', '70%'],
            data: salaryData.map((item) => {
              return {
                name: item.label,
                value: item.g_count,
              }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      myChart2.setOption(option)
      //获取所有数据
      const btns = document.querySelectorAll('#btns .btn-xs ')
      console.log(btns) //伪数组 可以用forech
     
    }
    classEchars(salaryData)

    
    
    const initMapChart = (provinceData) => {
      const myEchart = echarts.init(document.querySelector('#map'))
      
      const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
      ]

      provinceData.forEach(v => {
        // console.log(v);//后台数据每个对象
        dataList.find(item => {
          // console.log(item.name);
          // console.log(v.name.indexOf(item.name));//后台数据和当前数据对比有没有这个对应数据 有为0没有为-1
          if (v.name.indexOf(item.name)===0) {
            item.value = v.value//把后台value替换当前没有的
            
          }
        })
      })
      let option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
      }
      myEchart.setOption(option)
    }
    initMapChart(provinceData)
  } catch (err) {
    console.log(err)
  }
}
